<template>
  <div class="map-chart-wrap" v-if="showChart">
    <ScatterChart :chartStyle="chartStyle" domId="scatterChart" v-loading="loading" :chartData="chartData" ref="mappingRef" :PanelForB6="PanelForB6"/>
  </div>
</template>
<script>
import ScatterChart from '../component/ScatterChart/index.vue'

export default {
  components:{ScatterChart},
  data() {
    return {
      showChart:false,
      loading:false,
      props: { multiple: true },
      chartStyle:{
        width: '55%',
      },
      chartData:{
        op:null,
        title:"",
        model:"",
        showLegend: true
      },
      detailData:{
        model:""
      },
      PanelForB6:{
        totalHeight:0,
        totalWidth:0,
        qpanelInfos:[]
      }
    }
  },
  computed:{
    mapTitle(){
      return `${this.detailData.model} 不良Map集中`
    },
  },
  mounted() {
    this.getScatterData()
    window.addEventListener('resize', this.onChartResize)
  },
  methods: {
    onChartResize () {
      this.$nextTick(() => {
        this.$refs.mappingRef?.onChartResize()
      })
    },
    async getScatterData(){
      this.loading=true
      let {data:PanelForB6}= await fetch(`http://localhost:9000/alarm/mapLayout`).then(r => r.json())
      Object.assign(this.PanelForB6,PanelForB6)
      let {data:detailData}= await fetch(`http://localhost:9000/alarm/alarmDetail`).then(r => r.json())
      Object.assign(this.detailData,detailData)
      let {data:chartData}=await fetch(`http://localhost:9000/alarm/mapFocusGraphDataV2`).then(r => r.json())
      this.chartData.title=this.mapTitle
      this.chartData.model=this.detailData.model
      Object.assign(this.chartData,chartData[0].data)
      this.showChart=true
      this.loading=false
    },
  }
}
</script>
<style>
.map-chart-wrap{
  width: 100%;
  position: relative;
  padding-bottom: 16px;
}
</style>